<template>
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
          </image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title">
              用户名：{{ name }}
            </view>
          </view>
        </view>
        <view @click="handleToInfo" class="flex align-center">
			<!-- 写按钮 -->
          <uni-icons type="gear-filled" size="30" color="white"></uni-icons>
        </view>
      </view>
    </view>


<!-- 优惠券 -->
    <view class="content-section" @tap="ComeToMyRoll">
     <view class="mine-actions grid col-4 text-center">
       <view class="action-item">
          <!-- <view class="iconfont icon-friendfill text-pink icon"></view> -->
          <text class="text">优惠劵</text>
        </view>
        <view class="action-item">
          <!-- <view class="iconfont icon-service text-blue icon"></view> -->
          <text class="text">{{this.TicketNum}}张</text>
        </view>
      </view>

    </view>
	
	<!-- 开始写订单 -->
	<view class="myorder">
		<view class="order_function">
			<view class="order_title" style="font-weight:800" >我的订单</view>
			<view class="order_icon"><uni-icons type="wallet-filled" size="40" color="grey"></uni-icons></view>
			<view class="order_status">待支付</view>
		</view>
		<view class="order_function">
			<view class="order_title"></view>
			<view class="order_icon"><uni-icons type="vip-filled" size="40" color="grey"></uni-icons></view>
			<view class="order_status">待使用</view>
		</view>
		<view class="order_function">
			<view class="order_title" @click="toMyorder">全部订单></view>
			<view class="order_icon"><uni-icons type="compose" size="40" color="grey"></uni-icons></view>
			<view class="order_status">待评价</view>
		</view>
	</view>
	
	<!-- 开始写服务 -->
	<view class="myserver">
		<view class="myserver-title">我的服务</view>
		<view class="myserver-choose">
			<view class="myserver-choose-0" @click="ComeToRollCenter">
				<view class="myserver-choose-0-icon"><uni-icons type="star-filled" size="30" color="orange" ></uni-icons></view>
				<view class="myserver-choose-0-text">领券中心</view>
			</view>
			<view class="myserver-choose-0">
				<view class="myserver-choose-0-icon"><uni-icons type="redo-filled" size="30" color="#4d9ae7"></uni-icons></view>
				<view class="myserver-choose-0-text">邀请好友</view>
			</view>
			<view class="myserver-choose-0" @click="ComeToMyCar">
				<view class="myserver-choose-0-icon"><fui-icon name="sendout" color="#00bc00"></fui-icon></view>
				<view class="myserver-choose-0-text">我的车辆</view>
			</view>
			<view class="myserver-choose-0" @click="ComeToConsumeLog">
				<view class="myserver-choose-0-icon"><fui-icon name="order-fill" color="#008600"></fui-icon></view>
				<view class="myserver-choose-0-text">消费记录</view>
			</view>
			<view class="myserver-choose-0">
				<view class="myserver-choose-0-icon"><fui-icon name="info" color="#ec0000"></fui-icon></view>
				<view class="myserver-choose-0-text">我的维修</view>
			</view>
			<view class="myserver-choose-0">
				<view class="myserver-choose-0-icon"><uni-icons type="mail-open" size="30" color="#008600"></uni-icons></view>
				<view class="myserver-choose-0-text">意见反馈</view>
			</view>
			<view class="myserver-choose-0">
				<view class="myserver-choose-0-icon"><uni-icons type="home-filled" size="30" color="#4b97e2"></uni-icons></view>
				<view class="myserver-choose-0-text">收货地址</view>
			</view>
		</view>
	</view>
	
	
	<!-- 开始写退出登陆 -->
	<view class="unlogin">退出登录</view>
  
  </view>
</template>

<script>
  import storage from '@/utils/storage'
  import fuiIcon from "@/component/firstui/firstui/fui-icon/fui-icon.vue"
  import {getUserProfile} from "@/api/system/user"
  import request from '../../utils/request';
import { ref } from 'vue';
  export default {
onShow() {
  this.firstopen();
  
  // ✅ 正确获取用户信息
  getUserProfile().then((res) => {
    const userId = res.data.userId;  // 直接获取用户ID
    
    // ✅ 正确发起请求
    request({
      url: `/gyf/ticket/getUserTicket?userId=${userId}&status=136`,
      method: 'get'
    }).then(response => {
      // ✅ 正确更新数据
      this.TicketNum = response.data?.length || 0;
      console.log("当前优惠券数量:", this.TicketNum);
    }).catch(err => {
      console.error("获取优惠券失败:", err);
      this.TicketNum = 0; // 失败时重置为0
    });
  }).catch(err => {
    console.error("获取用户信息失败:", err);
  });
},
	  
	  
    data() {
      return {
        name: this.$store.state.user.name,
        version: getApp().globalData.config.appInfo.version,
		TicketNum:0,
      }
    },
	components:{
		fuiIcon
	},
    computed: {
      avatar() {
        return this.$store.state.user.avatar
      },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
    methods: {
		firstopen(){
			console.log("第一次加载")
		},
      handleToInfo() {
        this.$tab.navigateTo('/pages/mine/info/index')
      },
      handleToEditInfo() {
        this.$tab.navigateTo('/pages/mine/info/edit')
      },
      handleToSetting() {
        this.$tab.navigateTo('/pages/mine/setting/index')
      },
      toMyorder() {
        uni.navigateTo({
          url: '/pages/myorder/myorder'
        });
      },
      handleToLogin() {
        this.$tab.reLaunch('/pages/login')
      },
      handleToAvatar() {
        this.$tab.navigateTo('/pages/mine/avatar/index')
      },
      handleLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/pages/index')
          })
        })
      },
      handleHelp() {
        this.$tab.navigateTo('/pages/mine/help/index')
      },
      handleAbout() {
        this.$tab.navigateTo('/pages/mine/about/index')
      },
	  
	  
	  // 跳转到领券中心
	  ComeToRollCenter(){
		  uni.navigateTo({
		  	url:"/pages/gyf/roll_center/roll_center"
		  })
	  },
	  
	  //跳转到我的优惠券
	  ComeToMyRoll(){
		  uni.navigateTo({
		  	url:"/pages/gyf/my_roll/my_roll"
		  })
	  },
	  
	  // 我的车辆
	  ComeToMyCar(){
		  uni.navigateTo({
		  	url:"/pages/gyf/my_car/my_car"
		  })
	  },
	  
	  //消费记录
	  ComeToConsumeLog(){
		  uni.navigateTo({
		  	url:"/pages/gyf/consume_log/consume_log"
		  })
	  }
	  
	  
	  
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f5f6f7;
  }

  .mine-container {
    width: 100%;
    height: 100%;


    .header-section {
      padding: 15px 15px 45px 15px;
      background-color: #3c96f3;
      color: white;

      .login-tip {
        font-size: 18px;
        margin-left: 10px;
      }

      .cu-avatar {
        border: 2px solid #eaeaea;

        .icon {
          font-size: 40px;
        }
      }

      .user-info {
        margin-left: 15px;

        .u_title {
          font-size: 18px;
          line-height: 30px;
        }
      }
    }

    .content-section {
      position: relative;
      top: -50px;

      .mine-actions {
        margin: 15px 15px;
        padding: 20px 0px;
        border-radius: 8px;
        background-color: white;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.action-item {
			width:30%;
			height: 100%;
			// background-color:saddlebrown;
          .icon {
            font-size: 28px;
          }

          .text {
            display: block;
            font-size: 20px;
            margin: 8px 0px;
          }
        }
      }
    }
	
	
	//订单
.myorder{
	width: 90vw;
	height: 15vh;
	margin: -7vh auto 0;
	border-radius: 10px;
	padding:1vh 2vw;
	// background-color: seagreen;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-shadow: 1px 1px 5px 1px #dbdbdb;
	.order_function{
				width: 25%;
				height: 100%;
				overflow: hidden;
					.order_title{
						width: 100%;
						height: 25%;
						text-align: center;
					}
					.order_icon{
						width: 100%;
						height: 50%;
						text-align: center;
					}
					.order_status{
						width:100%;
						height: 25%;
						text-align: center;
					}
			}
		

}



// 我的服务
.myserver{
	width: 90vw;
	height: 30vh;
	// background-color: sienna;
	margin:2vh auto;
	padding: 1vh 2vw;
	.myserver-title{
		width: 100%;
		height: 25%;
		font-weight: 800;
		// background-color: #3c96f3;
	}
	.myserver-choose{
		width: 100%;
		height: 75%;
		// background-color: seagreen;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: center;
			.myserver-choose-0{
				width: 24.99%;
				height: 49.5%;
				// background-color: gold;
				border: 1px solid #d0d0d0;
				border-left:none;
				border-top:none;
				padding: 1vh 2vw;
			}
			.myserver-choose-0:nth-of-type(5){
				border-bottom:none;
			}
			.myserver-choose-0:nth-of-type(6){
				border-bottom:none;
			}
			.myserver-choose-0:nth-of-type(7){
				border-bottom:none;
			}
			.myserver-choose-0-icon{
				width: 100%;
				height: 60%;
				text-align: center;
			}
			.myserver-choose-0-text{
				width: 100%;
				height: 40%;
			}
	}
	
}


	// 退出登陆
.unlogin{
		margin: 9vh auto;
		width: 17vw;
		height: 4vh;
		color: #0055ff;
}







}
  
</style>
